<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t("关键节点计划") }}</span>
    </div>
    <!-- <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('土地获取')" prop="landAcquire">
        <el-date-picker
          v-model="queryParams.landAcquire"
          clearable
          style="width: 200px"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="$t('土地获取')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form> -->

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:planning:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>
    </el-row> -->

    <el-table
      v-loading="loading"
      :data="dealNodePlanningList"
      border
      :cell-style="isRed"
      tooltip-effect="darkTable"
    >
      <el-table-column
        :label="$t('序号')"
        type="index"
        align="center"
        show-overflow-tooltip
        width="50"
      >
        <template slot-scope="scope">
          {{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('节点名称')" align="center" prop="name" />
      <el-table-column :label="$t('投前版本')" align="center" prop="v1">
        <template v-if="!dealStatus" slot="header">
          <span>{{ $t("投前版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId1, 'TQBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.v1, "{y}-{m}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="dealStatus"
        :label="$t('定位版本')"
        align="center"
        prop="v2"
      >
        <template slot="header">
          <span>{{ $t("定位版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId2, 'DWBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.v2, "{y}-{m}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="dealStatus"
        :label="$t('最新版本')"
        align="center"
        prop="v3"
      >
        <template slot="header">
          <span>{{ $t("最新版本") }}</span>
          <i
            class="el-icon-edit-outline"
            style="
              display: inline-block;
              margin: 2px auto;
              font-size: 16px;
              cursor: pointer;
            "
            @click="addHandle(vId3, 'ZXBB')"
          />
        </template>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.v3, "{y}-{m}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="dealStatus"
        :label="$t('差异')"
        align="center"
        prop="diff"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.diff > 0?"待办不及预期有延后:"+scope.row.diff+"月":"" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:planning:edit']"
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="updateHandle(scope.row)"
          >{{ $t('修改') }}</el-button>
          <el-button
            v-hasPermi="['system:planning:remove']"
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandle(scope.row)"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->

    <!-- 添加或修改关键节点计划对话框 -->
    <el-dialog
      :title="$t(title)"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealNodePlanningForm ref="dealNodePlanningForm" />
    </el-dialog>
  </div>
</template>

<script>
import {
  listDealNodePlanning,
  delDealNodePlanning,
  exportDealNodePlanning
} from '@/api/deal/estate/nodePlan/dealNodePlanning'
import dealNodePlanningForm from './dealNodePlanningForm.vue'
export default {
  components: {
    dealNodePlanningForm
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      vId1: '',
      vId2: '',
      vId3: '',
      // 项目状态
      dealStatus: false,
      // 总条数
      total: 0,
      // 关键节点计划表格数据
      dealNodePlanningList: [],
      indexList: [],
      // 弹出层标题
      title: '关键节点计划',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        dealId: this.$route.query.id,
        landAcquire: undefined,
        stateLand: undefined,
        landAgree: undefined,
        constructionAgree: undefined,
        constructionBuildAgree: undefined,
        developGain: undefined,
        presellCard: undefined,
        ticket: undefined,
        completed: undefined,
        takeBackShareholder: undefined,
        moneyFlow: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询关键节点计划列表 */
    getList() {
      this.loading = true
      listDealNodePlanning(this.queryParams).then((response) => {
        const list = response.rows
        let v1 = null
        let v2 = null
        let v3 = null
        this.indexList = response.rows
        if (list.length > 0) {
          this.vId1 = response.rows[0].id
          const status = response.rows[0].dealStatus
          if (status === 'TQ' || status === 'CB' || status === 'ZZ') {
            this.dealStatus = false
          } else {
            this.dealStatus = true
          }
          v1 = new Map(Object.entries(list[0]))
        }
        if (list.length > 1) {
          this.vId2 = response.rows[1].id
          v1 = new Map(Object.entries(list[0]))
          v2 = new Map(Object.entries(list[1]))
        }
        if (list.length > 2) {
          this.vId3 = response.rows[2].id
          v1 = new Map(Object.entries(list[0]))
          v2 = new Map(Object.entries(list[1]))
          v3 = new Map(Object.entries(list[2]))
        }
        const label = [
          '土地获取',
          '国有土地证',
          '用地规划许可证',
          '建设规划许可证',
          '建设施工许可证',
          '开发贷获取时间',
          '预售证时间',
          '开盘日期',
          '竣工验收时间',
          '收回股东投入时间',
          '现金流回正时间'
        ]
        const keys = [
          'landAcquire',
          'stateLand',
          'landAgree',
          'constructionAgree',
          'constructionBuildAgree',
          'developGain',
          'presellCard',
          'ticket',
          'completed',
          'takeBackShareholder',
          'moneyFlow'
        ]
        const newArr = []
        for (var i = 0; i < keys.length; i++) {
          const obj = {
            name: label[i],
            v1: v1 == null ? '' : v1.get(keys[i]),
            v2: v2 == null ? '' : v2.get(keys[i]),
            v3: v3 == null ? '' : v3.get(keys[i]),
            diff: v3 == null ? '' : this.datemonth(v1.get(keys[i]), v3.get(keys[i]))
          }
          newArr.push(obj)
        }
        // this.total = response.total
        this.dealNodePlanningList = newArr
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,

        landAcquire: undefined,

        stateLand: undefined,

        landAgree: undefined,

        constructionAgree: undefined,

        constructionBuildAgree: undefined,

        developGain: undefined,

        presellCard: undefined,

        ticket: undefined,

        completed: undefined,

        takeBackShareholder: undefined,

        moneyFlow: undefined,

        createBy: undefined,

        delFlag: undefined,

        createTime: undefined,

        remark: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle(id, type) {
      if (type === 'ZXBB' && this.indexList.length < 2) {
        return this.$message(this.$t('请先添加定位版本'))
      }
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealNodePlanningForm.init(id, type)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealNodePlanningForm.init(row)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(function() {
          return delDealNodePlanning(row.id)
        })
        .then(() => {
          this.getList()
          this.msgSuccess(this.$t('删除成功'))
        })
        .catch(function() {})
    },
    /** 导出按钮操作 */
    exportHandle() {
      const queryParams = this.queryParams
      this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(function() {
          return exportDealNodePlanning(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
        .catch(function() {})
    },
    // 返回两个日期相差的月数
    // 计算日期之间的月数
    datemonth(date1, date2) {
      if (date1 == null || date2 == null) {
        return false
      }
      // 拆分年月日
      date1 = date1.split('-')
      // 得到月数
      date1 = parseInt(date1[0]) * 12 + parseInt(date1[1])
      // 拆分年月日
      date2 = date2.split('-')
      // 得到月数
      date2 = parseInt(date2[0]) * 12 + parseInt(date2[1])
      var m = date2 - date1
      return m
    },
    isRed({ row, column, rowIndex, columnIndex }) {
      console.log(column, rowIndex)
      if (columnIndex === 5 && row.diff > 0) {
        return {
          backgroundColor: '#e67e22'
        }
      }
    }
  }
}
</script>
